<!-- 
    H5中新增标签，没有特殊的样式，仅表示语义
    <header> 表示网页头部</header>
    <main>表示网页主题(只能有一个)</main>
    <footer>表示网页底部</footer>
    <nav>表示网页中的导航</nav>
    <aside>侧边栏</aside>
    <article>表示一个独立的文章</article>
    <section>表示一个独立的区块，上边标签都不能表示时使用</section>
-->
<!-- 
    包含块
    普通元素：离自己最近的祖先块元素
    绝对定位元素：离自己最近的开启定位的祖先元素，若没有则为根元素(html)
 -->

<!-- CSS-Sprite[雪碧图]：
        将多个小图合成一张图片，通过调整background-position显示不同图片
 -->

<!-- 如下皆为2016年内容 -->
<!-- 
    导航条多用无序列表实现
    ul
    li a li
    ul
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设定移动端完美视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
        设置网站图标(标题栏/收藏栏)
        一般存放在网站根目录下，叫做favicon.ico 
    -->
    <link rel="icon" href="./static/icon/favicon.ico">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px;
            border: #bfa 3px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }
    </style>
</head>


<body>
    <!-- 音频 -->
    <audio src="./static/人类的光.flac" controls></audio>
    <audio controls>
        对不起，您的浏览器不支持该播放器
        <!--
            不同的浏览器支持的音频格式不同
            可设置多个source，浏览器会选择其中支持的文件    
        -->
        <source src="./static/人类的光.flac">
        <!-- IE支持的音频标签 -->
        <embed src="./static/人类的光.flac" type="audio/flac" width="100px">
    </audio>
    <!-- controls-允许用户操控 autoplay-自动播放 loop-循环播放 -->
    <!-- /音频 -->

    <!-- 视频 -->
    <video controls width="90%">
        <source src="./static/html基础-1.mp4">
        <embed src="./static/html基础-1.mp4" type="video/mp4">
    </video>
    <!-- /视频 -->


    <!-- 设置图片的时候，图片底端会和下边距有一段距离 
    将vertical-align设置一个非基线对齐方式即可解决
    -->
    <div>
        <img src="./static/1.png" alt="" width="500px">
    </div>
    <div>
        <img src="./static/1.png" alt="" width="500px" style="vertical-align: middle;">
    </div>
</body>

</html>